/**
* 头部菜单
*/ 
<template>
  <div>
    <el-row>
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#FFFFFF"
        text-color="#999093"
        active-text-color="#fff"
      >
        <el-menu-item>
          <el-button class="el-icon-s-promotion" @click="sendMessage3()" > </el-button>
        </el-menu-item>
        <div class="inline"  v-for="(value, index) in list" :key="index" >
          <router-link :to="value.router" class="nodecoration" >
        <el-menu-item class="inline" >
          
           <i :class="value.icon"></i>
            {{ value.name }}
         
        </el-menu-item>
         </router-link>
        </div>
        <el-submenu index="2" class="submenu">
          <template slot="title">超级管理员</template>
          <el-menu-item index="2-1">设置</el-menu-item>
          <el-menu-item @click="content()" index="2-2">个人中心</el-menu-item>
          <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-row>

  <!--   <el-row id="left">
      <el-button type="primary">主页</el-button>
      <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
        {{ tag.name }}
      </el-tag>
    </el-row> -->

    
    <el-row id="clear"> <el-divider id="divider"></el-divider></el-row>
  </div>
</template>
<script>
export default {
  name: "HeaderIndex",
  data() {
    return {
      collapsed: true,
      user: {},
      list: [
        { name: "系统管理", router: "/",icon:"el-icon-s-home"},
        { name: "系统监控", router: "/SystemControl" ,icon:"el-icon-s-platform"},
        { name: "系统工具", router: "/SystemManage",icon:"el-icon-video-camera-solid" },
      ],
      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
        { name: "标签五", type: "danger" },
      ],
      flag:true
    };
  },
  // 创建完毕状态(里面是操作)
  created() {},
  methods: {
    // 退出登录
    exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setTimeout(() => {
        /*     this.$store.commit("logout", "false");
            this.$router.push({ path: "/login" }); */
            this.$message({
              type: "success",
              message: "已退出登录!",
            });
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    sendMessage3(){
      if(this.flag==true){
         this.$emit("func3","big")
          this.flag=false
      }else{
       this.$emit("func3","small")
        this.flag=true
      }
     
    }
    /*   toggle(showtype) {
    
      this.collapsed = !showtype;
      this.$root.Bus.$emit("toggle", this.collapsed);
    }, */
    // 切换显示
  },
};
</script>
<style scoped>
.submenu {
  float: right !important;
}
#left {
  float: left;
}
#left::after {
  clear: both;
}
#clear {
  clear: left;
}
#divider {
  margin: 0px;
}
.nodecoration {
  text-decoration: none;
}
.inline{
  display: inline !important;
  float: left;
}
</style>